<nav class = "pcoded-navbar">
    <div class = "navbar-wrapper">
        <div class = "navbar-brand header-logo">
            <a target = "_blank"
               href = "https://appseed.us/admin-dashboards/django-dashboard-dattaable" class = "b-brand">
                <div class = "b-bg">
                    <i class = "feather icon-trending-up"></i>
                </div>
                <span class = "b-title">Datta模板</span>
            </a>
            <a class = "mobile-menu" id = "mobile-collapse" href = "javascript:"><span></span></a>
        </div>
        <div class = "navbar-content scroll-div">
            <ul class = "nav pcoded-inner-navbar">
                <li class = "nav-item pcoded-menu-caption">
                    {#                    <label>导航</label>#}
                </li>
                <li data-username = "dashboard Default Ecommerce CRM Analytics Crypto Project"
                    class = "nav-item {% if 'index' in segment %} active {% endif %}">
                    <a href = "/" class = "nav-link "><span class = "pcoded-micon"><i
                            class = "feather icon-home"></i></span><span class = "pcoded-mtext">仪表盘</span></a>
                </li>
                <li class = "nav-item pcoded-menu-caption">
                    {#                    <label>UI 元素</label>#}
                    <h4 class = "text-white">UI 元素</h4>
                </li>
                <li data-username = "basic components Button Alert Badges breadcrumb Paggination progress Tooltip popovers Carousel Cards Collapse Tabs pills Modal Grid System Typography Extra Shadows Embeds"
                    class = "nav-item pcoded-hasmenu">
                    <a href = "javascript:" class = "nav-link "><span class = "pcoded-micon"><i
                            class = "feather icon-box"></i></span><span class = "pcoded-mtext">组件</span></a>
                    <ul class = "pcoded-submenu">
                        <li class = ""><a href = "/ui-button.html" class = "">按钮</a></li>
                        <li class = ""><a href = "/ui-badges.html" class = "">徽章</a></li>
                        <li class = ""><a href = "/ui-breadcrumb-pagination.html" class = "">面包屑导航 & 分页</a></li>
                        <li class = ""><a href = "/ui-collapse.html" class = "">折叠面板</a></li>
                        <li class = ""><a href = "/ui-tabs.html" class = "">标签 & 胶囊</a></li>
                        <li class = ""><a href = "/ui-typography.html" class = "">排版</a></li>
                        <li class = ""><a href = "/ui-icons.html" class = "">Feather图标库<span
                                class = "pcoded-badge label label-danger">NEW</span></a></li>
                    </ul>
                </li>
                <li class = "nav-item pcoded-menu-caption">
                    {#                    <label>表单 & 表格</label>#}
                    <h4 class = "text-white">表单 & 表格</h4>

                </li>
                <li data-username = "form elements advance componant validation masking wizard picker select"
                    class = "nav-item {% if 'ui-forms' in segment %} active {% endif %}">
                    <a href = "/ui-forms.html" class = "nav-link "><span class = "pcoded-micon"><i
                            class = "feather icon-file-text"></i></span><span class = "pcoded-mtext">表单元素</span></a>
                </li>
                <li data-username = "Table bootstrap datatable footable"
                    class = "nav-item {% if 'ui-tables' in segment %} active {% endif %}">
                    <a href = "/ui-tables.html" class = "nav-link "><span class = "pcoded-micon"><i
                            class = "feather icon-server"></i></span><span class = "pcoded-mtext">表格</span></a>
                </li>
                <li class = "nav-item pcoded-menu-caption">
                    <!--<label>图表 & 地图</label>-->
                    <h4 class = "text-white">图表 & 地图</h4>
                </li>
                <li data-username = "Charts Morris"
                    class = "nav-item {% if 'charts-morris' in segment %} active {% endif %}">
                    <a href = "/charts-morris.html" class = "nav-link "><span class = "pcoded-micon"><i
                            class = "feather icon-pie-chart"></i></span><span class = "pcoded-mtext">可社化图表</span></a>
                </li>
                <!--<li data-username="Maps Google"
                         class="nav-item {% if 'maps-google' in segment %} active {% endif %}">
                        <a href="/maps-google.html" class="nav-link "><span class="pcoded-micon"><i class="feather icon-map"></i></span><span class="pcoded-mtext">地图</span></a></li>-->
                <li class = "nav-item pcoded-menu-caption">
                    {#                    <label>页面</label>#}
                    <h4 class = "text-white">页面</h4>
                </li>
                <li data-username = "Authentication Sign up Sign in reset password Change password Personal information profile settings map form subscribe"
                    class = "nav-item pcoded-hasmenu">
                    <a href = "javascript:" class = "nav-link "><span class = "pcoded-micon"><i
                            class = "feather icon-lock"></i></span><span class = "pcoded-mtext">认证</span></a>
                    <ul class = "pcoded-submenu">
                        <li class = ""><a href = "/auth-reset-pass.html" class = "">重置账号</a></li>
                        <li class = ""><a href = "/login.html" class = "">登录 (模板)</a></li>
                        <li class = ""><a href = "/register.html" class = "">注册 (模板)</a></li>
                    </ul>
                </li>
                <li data-username = "Sample Page"
                    class = "nav-item {% if 'page-blank' in segment %} active {% endif %}">
                    <a href = "/page-blank.html" class = "nav-link"><span class = "pcoded-micon"><i
                            class = "feather icon-sidebar"></i></span><span class = "pcoded-mtext">样本页</span></a></li>
                <li data-username = "Sample Page" class = "nav-item"><a href = "/page-404.html" class = "nav-link"><span
                        class = "pcoded-micon"><i class = "feather icon-sidebar"></i></span><span
                        class = "pcoded-mtext">Error 404</span></a></li>

                <li data-username = "Disabled Menu" class = "nav-item">
                    <a href = "{% url 'logout' %}" class = "nav-link">
                        <span class = "pcoded-micon"><i class = "feather icon-power"></i></span><span
                            class = "pcoded-mtext">登出</span>
                    </a>
                </li>
                <li class = "nav-item pcoded-menu-caption">
                    {#                    <label>更多资源</label>#}
                    <h4 class = "text-white">更多资源</h4>
                </li>
                <li data-username = "Support Page" class = "nav-item ">
                    <a target = "_blank" href = "https://appseed.us/support" class = "nav-link">
                            <span class = "pcoded-micon">
                                <i class = "feather icon-headphones"></i>
                            </span>
                        <span class = "pcoded-mtext">支持</span>
                    </a>
                </li>
                <li data-username = "Support Page" class = "nav-item ">
                    <a target = "_blank" href = "https://appseed.us/admin-dashboards/django-dashboard-dattaable-pro"
                       class = "nav-link">
                            <span class = "pcoded-micon">
                                <i class = "feather icon-tag"></i>
                            </span>
                        <span class = "pcoded-mtext">PRO版本</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>
